<template>
	<view class="container" style="border-radius: 8rpx;background-color: white;">
		<view class="time-desc">{{ createTimeDesc }}</view>
		<view class="head">
			<!-- <view class="head-avatar"></view> -->
			<image class="head-avatar" :src="item.userDto.avatarUrl" mode="scaleToFill" />

			<view class="head-rg">
				<view class="head-rg-title">{{title}}</view>
				<view class="head-rg-label-wrap mb10">
					<view class="head-rg-label">期望区域：</view>
					<view class="head-rg-label-value">{{ item.area }}</view>
					<view class="head-rg-label">租金预算：</view>
					<view class="head-rg-label-value">{{ buyRent }}</view>
					<!-- <view class="head-rg-label-rent">Rent</view> -->
				</view>
				<view class="head-rg-label-wrap">
					<view class="head-rg-label">求租面积：</view>
					<view class="head-rg-label-rent">{{ buyAcreage }}</view>
					<view class="head-rg-label-value">{{ buyAcreage == '不限' ? '' : '㎡' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { PostUtils } from '@/components/post_item/post_add_sell_dto';
import { CustomDict } from '@/components/custom_views/custom_dict';
import { CustomDate } from '@/components/custom_views/custom_date';

export default {
	options: {
		styleIsolation: 'shared'
	},
	name: 'postItemMyCollectBuy',
	components: {
	},
	props: {
		item: {
			type: Object,
			default: function () {
				return {};
			}
		},

	},
	data() {
		return {
		}
	},
	methods: {
		
	},
	computed: {
		buyAcreage() {
			if (this.item.upperAcreage >= 10000) {
				return '不限'
			} else {
				return this.item.lowerAcreage + '-' + this.item.upperAcreage
			}
		},
		buyRent() {
			return CustomDict.getRentDesc(this.item.lowerRent, this.item.upperRent)
		},
		title(){
			return PostUtils.getTitle(this.item)
		},
		createTimeDesc(){
			return CustomDate.formatRelativeDate(this.item.updateTime)
		}
	}
}
</script>
<style scoped lang="scss">
@import url(../../static/css/base.css);

.container {
	border-radius: 8rpx;
	background: #FFFFFF;
	position: relative;
	width: 686rpx;
    margin: auto;
    margin-bottom: 30rpx;
	padding: 40rpx 30rpx;
	box-sizing: border-box;

}

.time-desc {
	position: absolute;
	top: 24rpx;
	right: 24rpx;
	opacity: 1;

	font-size: 24rpx;
	color: #999999;
}

.head {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;

	.head-avatar {
		width: 104rpx;
		height: 104rpx;
		box-sizing: border-box;
		border: 2rpx solid #F8D247;
		border-radius: 50%;
	}

	.head-rg {
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;

		.head-rg-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 10rpx;
		}

		.head-rg-label-wrap {
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			.head-rg-label {
				font-weight: 400;
				font-size: 24rpx;
				color: #9E9E9E
			}

			.head-rg-label-value {
				font-weight: 600;
				font-size: 24rpx;
				color: #333333;
				margin-right: 18rpx;
			}

			.head-rg-label-rent {
				font-weight: 600;
				font-size: 32rpx;
				color: #EF2D2D
			}
		}
	}
}

.divider {
	margin-left: 52rpx;
	margin-right: 52rpx;
	margin-top: 22rpx;

	border: 0.5px solid #EEEEEE;
}

.footer {
	display: flex;
	flex-direction: row;

	.footer-wrap {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 22rpx;
		padding-bottom: 18rpx;

		.footer-icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 6rpx;
		}

		.footer-btn {
			margin-left: 6rpx;
			font-size: 24rpx;
			font-weight: 600;
			color: #666666;
		}
	}

	.footer-divider {
		height: 40rpx;
		opacity: 1;

		border: 0.5px solid #E8E8E8;
	}
}
</style>